import * as THREE from '../../build/three.module.js';
import Stats from '../../jsm/libs/stats.module.js';

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x010101);

const camera = new THREE.PerspectiveCamera(24, innerWidth / innerHeight, 1, 4000);
camera.position.z = 2700;

const segments = 10000,
      r = 800;

const gmt = new THREE.BufferGeometry();
const mtl = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });

const postions = [],
      colors = [];

for(let i = 0; i < segments; i += 1) {
  const x = Math.random() * r - r / 2;
  const y = Math.random() * r - r / 2;
  const z = Math.random() * r - r / 2;
  postions.push(x, y, z);

  colors.push( (x / r) + .5 );
  colors.push( (y / r) + .5 );
  colors.push( (z / r) + .5 );
}

gmt.setAttribute('position', new THREE.Float32BufferAttribute(postions, 3));
gmt.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

gmt.computeBoundingSphere();

const line = new THREE.Line(gmt, mtl);
scene.add(line);

const renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(devicePixelRatio);
renderer.setSize(innerWidth, innerHeight);
renderer.gammaInput = true;
renderer.gammaOutput = true;
document.body.appendChild(renderer.domElement);

const stats = new Stats();
document.body.appendChild(stats.dom);

const render = () => {
  const time = Date.now() * .001;
  line.rotation.x = time * .25;
  line.rotation.y = time * .5;

  renderer.render(scene, camera);
}

const animate = () => {
  requestAnimationFrame(animate);

  stats.update();
  render();
}
animate();

const handleWindowResize = () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(innerWidth, innerHeight);
}

window.addEventListener('resize', handleWindowResize, false);